<template>
  <nav class="navbar">
    <div class="navbar-container">
      <div class="logo">
        <h1>Dian Shagn</h1>
      </div>
      
      <ul class="nav-links">
        <li>
          <router-link to="/">首页</router-link>
        </li>
        <li v-if="isLoggedIn">
          <router-link to="/add-movie">添加商品</router-link>
        </li>
      </ul>
      
      <div class="auth-buttons">
        <button v-if="!isLoggedIn" class="btn" @click="showLoginModal">登录</button>
        <button v-if="!isLoggedIn" class="btn btn-primary" @click="showRegisterModal">注册</button>
        <div v-if="isLoggedIn" class="user-menu">
          <button class="user-btn" @click="toggleUserMenu">
            {{ displayName }} <i class="fa fa-caret-down"></i>
          </button>
          <div v-if="showUserMenu" class="user-dropdown">
            <button @click="logout">退出登录</button>
          </div>
        </div>
      </div>
    </div>
  </nav>
  
  <!-- 使用teleport将模态框挂载到body，避免嵌套层级问题 -->
  <teleport to="body">
    <LoginForm 
      v-if="showLogin" 
      @close="showLogin = false" 
      @login-success="handleLoginSuccess"
      @Login-Reg="LoginReg"
    />
    <RegisterForm 
      v-if="showRegister" 
      @close="showRegister = false" 
      @register-success="handleRegisterSuccess"
      @Reg-login="RegLogin"

    />
  </teleport>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import { useUserStore } from '@/stores/user';
import { useRouter } from 'vue-router';
import LoginForm from '@/components/auth/LoginForm.vue';
import RegisterForm from '@/components/auth/RegisterForm.vue';

// 引入用户状态管理Store
const store = useUserStore();
// 引入路由
const router = useRouter();

// 定义模态框显示状态
const showLogin = ref(false);
const showRegister = ref(false);
// 定义用户菜单显示状态
const showUserMenu = ref(false);

// 计算属性：获取登录状态
const isLoggedIn = computed(() => store.isLoggedIn);
// 计算属性：获取当前用户信息
const currentUser = computed(() => store.currentUser);
// 计算属性：处理用户显示名称（包含空值保护）
const displayName = computed(() => {
  return currentUser.value?.username || '游客';
});
const RegLogin = () =>{
  showLogin.value = true
  showRegister.value = false
}
const LoginReg = () =>{
  console.log(1)
  showLogin.value = false
  showRegister.value = true
}
// 显示登录模态框
const showLoginModal = () => {
  showLogin.value = true;
};

// 显示注册模态框
const showRegisterModal = () => {
  showRegister.value = true;
};

// 切换用户菜单显示状态
const toggleUserMenu = () => {
  showUserMenu.value = !showUserMenu.value;
};

// 处理登录成功逻辑
const handleLoginSuccess = () => {
  showLogin.value = false;
  router.push('/');
};

// 处理注册成功逻辑
const handleRegisterSuccess = () => {
  showRegister.value = false;
  showLogin.value = true;
};

// 退出登录
const logout = () => {
  store.logout();
  alert("退出成功")
  router.push('/');
  showUserMenu.value = false;
};
</script>

<style scoped>
/* 导航栏基础样式 */
.navbar {
  background-color: #1a1a2e;
  padding: 1rem 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  position: sticky;
  top: 0;
  z-index: 1000;
}

.navbar-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 2rem;
  box-sizing: border-box;
}

.logo {
  display: flex;
  align-items: center;
}

.logo h1 {
  color: white;
  font-size: 1.5rem;
  margin: 0;
  font-weight: 700;
}

.nav-links {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links li {
  margin: 0 15px;
}

.nav-links a {
  color: white;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.3s ease;
  display: block;
  padding: 0.5rem 0;
}

.nav-links a:hover {
  color: #e94560;
}

.auth-buttons {
  display: flex;
  align-items: center;
}

.auth-buttons .btn {
  margin-left: 10px;
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.auth-buttons .btn-primary {
  background-color: #e94560;
  color: white;
}

.auth-buttons .btn:not(.btn-primary) {
  background-color: transparent;
  color: white;
  border: 1px solid white;
}

.auth-buttons .btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.user-menu {
  position: relative;
  margin-left: 15px;
}

.user-btn {
  background-color: transparent;
  color: white;
  border: none;
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 8px 16px;
}

.user-btn i {
  margin-left: 5px;
  font-size: 0.8rem;
}

.user-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  background-color: white;
  border-radius: 4px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  padding: 10px;
  min-width: 120px;
  z-index: 100;
  margin-top: 5px;
}

.user-dropdown button {
  width: 100%;
  padding: 8px;
  text-align: left;
  background-color: transparent;
  border: none;
  cursor: pointer;
  border-radius: 4px;
  transition: background-color 0.3s ease;
}

.user-dropdown button:hover {
  background-color: #f0f0f0;
}

/* 响应式样式 */
@media (max-width: 768px) {
  .navbar-container {
    flex-direction: column;
    padding: 1rem;
  }
  
  .logo {
    margin-bottom: 10px;
  }
  
  .nav-links {
    margin: 10px 0;
    width: 100%;
    justify-content: center;
  }
  
  .auth-buttons {
    width: 100%;
    justify-content: center;
    margin-top: 10px;
  }
  
  .nav-links li {
    margin: 0 8px;
  }
}
</style>